window.addEventListener("load", () => {
  class Details {
    constructor() {
        this.items=document.querySelectorAll(".tab-box")
        this.data=[
          {"id":"1","count":1,
              "price": "\n                                                                    ￥1498\n                                                                ",
              "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2021-08-02/NEW_XL/ik1176 (3).png",
              "title": "【新品】罗技iK1095键盘保护套 适用于 iPad Air（第四代）"
          },
          {"id":"2","count":1,
              "price": "\n                                                                    ￥1498\n                                                                ",
              "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2021-08-02/NEW_XL/ik1176 (3).png",
              "title": "罗技iK1176键盘保护套 适用于 11 英寸 iPad Pro（第一、二、三代）"
          },
          {"id":"3","count":1,
              "price": "\n                                                                    ￥1698\n                                                                ",
              "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2021-08-02/NEW_XL/1.png",
              "title": "罗技iK1275键盘保护套 适用于 12.9 英寸 iPad Pro（第五代）"
          },
          {"id":"4","count":1,
              "price": "\n                                                                    ￥1899\n                                                                ",
              "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2021-04-06/NEW_XL/K860.png",
              "title": "罗技 ERGO K860人体工学分体式键盘"
          },
          {"id":"5","count":1,
              "price": "\n                                                                    ￥1599\n                                                                ",
              "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-12-08/NEW_XL/002.png",
              "title": "罗技Folio Touch ik1094键盘保护套"
          },
          {"id":"6","count":1,
              "price": "\n                                                                    ￥1599\n                                                                ",
              "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-11-27/NEW_XL/01 (1).png",
              "title": "罗技FolioTouch IK1175背光键盘保护套,适配11英寸iPad Pro(第一、二代)"
          },
          {"id":"7","count":1,
              "price": "\n                                                                    ￥1399\n                                                                ",
              "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-09-01/NEW_XL/01-1.png",
              "title": "罗技 Combo Touch键盘保护套（适配iPad第七代）"
          },
          {"id":"8","count":1,
              "price": "\n                                                                    ￥1399\n                                                                ",
              "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-09-01/NEW_XL/05.png",
              "title": "罗技 Combo Touch键盘保护套【适配iPad Air第三代和10.5英寸iPad Pro】"
          },
          {"id":"9","count":1,
              "price": "\n                                                                    ￥1099\n                                                                ",
              "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-08-11/NEW_XL/01.png",
              "title": "罗技 SLIM FOLIO PRO iK1274集成蓝牙键盘保护套"
          },
          {"id":"10","count":1,
              "price": "\n                                                                    ￥1229\n                                                                ",
              "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-07-29/NEW_XL/k380可妮兔-01-min.png",
              "title": "罗技 K380多设备蓝牙键盘LINE FRIENDS 可妮兔【限量送李易峰充电宝】"
          },
          {"id":"11","count":1,
              "price": "\n                                                                    ￥1229\n                                                                ",
              "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-07-29/NEW_XL/k380布朗熊-02-min.png",
              "title": "罗技 K380多设备蓝牙键盘LINE FRIENDS 布朗熊【限量送李易峰充电宝】"
          },
          {"id":"12","count":1,
              "price": "\n                                                                    ￥1799\n                                                                ",
              "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-07-29/NEW_XL/Slim-Folio-iPad-Air-键盘保护套-01.png",
              "title": "罗技 Slim Folio iPad键盘保护套 【ik1055BK iPad键盘保护套】"
          },
          {"id":"13","count":1,
              "price": "\n                                                                    ￥1799\n                                                                ",
              "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-07-29/NEW_XL/Slim-Folio-iPad-01 .png",
              "title": "罗技 Slim Folio iPad Air 键盘保护套"
          },
          {"id":"14","count":1,
              "price": "\n                                                                    ￥1229\n                                                                ",
              "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-07-29/NEW_XL/K380白-01-min.png",
              "title": "罗技 K380蓝牙键盘 芍药白【限量送李易峰充电宝】"
          },
          {"id":"15","count":1,
              "price": "\n                                                                    ￥1229\n                                                                ",
              "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-07-29/NEW_XL/K380粉-01-min.png",
              "title": "罗技 K380蓝牙键盘 茱萸粉【限量送李易峰充电宝】"
          },
          {"id":"16","count":1,
              "price": "\n                                                                    ￥1699\n                                                                ",
              "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2019-02-15/NEW_XL/ik1053-01.png",
              "title": "罗技 iK1053 键盘保护套【iK1052升级版，不含笔】"
          }
      ]
        this.init()
        this.bindevent();
        this.render();
    }
    init(){
      
    }
    bindevent() {
      $(".product-detail-tab-nav li a").click((e)=>{
          var e=e ||window.event;
            var e=e.srcElement || e.target;
         var p=e.parentNode.getAttribute("data-index");
            
          for(var i=0;i<this.items.length;i++){
              this.items[i].style.display="none"
          } 
            this.items[p].style.display="block"
        $(e.parentNode).addClass("active").siblings().removeClass("active")
      });
      $(".cut-btn").on("click",()=>{
          this.int=document.getElementById("txtCount")
          this.value=document.getElementById("txtCount").value
          if(this.value>0){
            this.value--;
            this.int.setAttribute("value",this.value)
            console.log(this.value);
          }
      });
      $(".add-btn").on("click",()=>{
        this.int=document.getElementById("txtCount")
        this.value=document.getElementById("txtCount").value;
          this.value++;
            this.int.setAttribute("value",this.value)
      });
      $("#txtCount").on("blur",()=>{
        this.int=document.getElementById("txtCount")
        this.value=document.getElementById("txtCount").value;
        this.int.setAttribute("value",this.value)
      })
      
    }
    render(){
        var num=location.hash.split("=")[1]
        var img=document.querySelector(".nb .small-img img")
        img.setAttribute("src",this.data[num-1].src);
        var title=document.querySelector(".product-title")
        title.innerHTML=this.data[num-1].title
        var price=document.querySelector(".sale-price")
        price.innerHTML=this.data[num-1].price
    }
    

  }
  new Details
});
